<template>
    <div class="outer">
        <div class="name">
            <p class="UnifiedName">车型名称</p>
            <div class="UnifiedBox">{{ carName }}</div>
        </div>
        <div class="name">
            <p class="UnifiedName">车型编号</p>
            <div class="UnifiedBox">{{ carCode }}</div>
        </div>
        <div class="name">
            <p class="UnifiedName">备注</p>
            <div class="UnifiedBoxs">
                <textarea
                    v-model="remark"
                    @input="handleInput"
                    maxlength="200"
                    placeholder="请输入备注内容"
                ></textarea>
                <p class="count">{{ count }}/200</p>
            </div>
        </div>

        <div class="distance" v-for="(item, index) in imageList" :key="index">
            <p>{{ item.title }}（最多9张）</p>
            <div class="Heng">
                <template v-if="item.images.length > 0">
                    <div
                        v-for="(image, i) in item.images"
                        :key="i"
                        class="imgs"
                    >
                        <img :src="image" alt="car image" class="img" />
                        <img
                            src="https://www.lxypt.net/uploadfiles/qh1c/icon/sousuo-close.png"
                            @click="deleteImage(index, i)"
                            class="delete"
                        />
                    </div>
                </template>

                <template v-if="item.images.length < 9">
                    <div class="dele">
                        <img
                            :src="item.defaultImageUrl"
                            @click="uploadImage(index)"
                            class="defaultImageUrl"
                        />
                    </div>
                </template>
            </div>
        </div>

        <div class="distance">
            <p>视频 video</p>
            <div class="Heng">
                <video v-if="video !== ''" :src="video" controls></video>
                <img
                    v-if="video !== ''"
                    src="https://www.lxypt.net/uploadfiles/qh1c/icon/sousuo-close.png"
                    @click="deleteVideo"
                    class="deleteButton"
                />
                <div class="dele" v-if="video === ''">
                    <img
                        v-if="video === ''"
                        :src="defaultVideoUrl"
                        @click="chooseVideo"
                        class="defaultImageUrl"
                    />
                </div>
            </div>
        </div>

        <div class="button">
            <button class="submit" @click="submit">上传Upload</button>
        </div>
    </div>
</template>
  
  <script>
import { uploadFile } from '@/apis/upimg';
import { submitsp } from '@/apis/upimg';
import { Echoinfo } from '@/apis/upimg';

export default {
    data() {
        return {
            remark: '', //备注信息
            count: 0, //备注的字数
            carId: 0,
            carName: '奥迪A8',
            carCode: 'ceshi9',
            imageList: [
                {
                    title: '车头图片',
                    images: [],
                    defaultImageUrl:
                        'https://lxfile.lingxiuyun.net:9898/default/paiz-X45.png',
                    carHeadPic: [],
                },
                {
                    title: '车尾图片',
                    images: [],
                    defaultImageUrl:
                        'https://lxfile.lingxiuyun.net:9898/default/paiz-X45.png',
                    carEndPic: [],
                },
                {
                    title: '主驾驶图片',
                    images: [],
                    defaultImageUrl:
                        'https://lxfile.lingxiuyun.net:9898/default/paiz-X45.png',
                    carMainDirverPic: [],
                },
                {
                    title: '副驾驶图片',
                    images: [],
                    defaultImageUrl:
                        'https://lxfile.lingxiuyun.net:9898/default/paiz-X45.png',
                    carDuputyDirvPic: [],
                },
                {
                    title: '后排图片',
                    images: [],
                    defaultImageUrl:
                        'https://lxfile.lingxiuyun.net:9898/default/paiz-X45.png',
                    carBackSeatPic: [],
                },
                {
                    title: '其他部位图片',
                    images: [],
                    defaultImageUrl:
                        'https://lxfile.lingxiuyun.net:9898/default/paiz-X45.png',
                    carotherPic: [],
                },
                // 其他部位图片数据
            ],
            video: '',
            carVideo: '',
            defaultVideoUrl:
                'https://lxfile.lingxiuyun.net:9898/default/paiz-X45.png',
        };
    },
    mounted() {
        console.log('接受的参数为', this.$route.params);
        // 通过 $route.params 对象获取参数
        const carId = this.$route.params.carId;
        const carName = this.$route.params.carName;
        const carCode = this.$route.params.carCode;

        console.log('接收到的 carId：', carId);
        console.log('接收到的 carName：', carName);
        console.log('接收到的 carName：', carCode);

        // 将获取到的值赋给页面data中的数据
        this.carId = carId;
        this.carName = carName;
        this.carCode = carCode;
        this.echo();
    },
    created() {
    
        },
    methods: {
        async uploadToServer(file, index, type) {
            const formData = new FormData();
            formData.append('file', file);

            try {
                const response = await uploadFile(formData, {
                    url: 'https://lxvideo.lingxiuyun.net:1101/api/life/common/uploadImageRussia',
                });
                console.log('上传成功', response);

                if (type === 'image') {
                    // 处理上传的图片
                    if (response && response.data && response.data.url) {
                        const imageUrl = response.data.url;
                        this.saveImageUrlToPosition(index, imageUrl);
                    }
                } else if (type === 'video') {
                    // 处理上传的视频
                    if (response && response.data && response.data.url) {
                        const videoUrl = response.data.url;
                        this.carVideo = videoUrl; // 保存视频地址到 carVideo 字段
                        console.log('视频地址', this.carVideo);
                    }
                }
            } catch (error) {
                console.error('上传失败', error);
                // 在这里可以处理上传失败后的逻辑
            }
        },

        saveImageUrlToPosition(index, url) {
            // 根据 index 将服务器返回的图片地址保存到对应的部位对象中的特定字段
            switch (index) {
                case 0:
                    this.imageList[index].carHeadPic.push(url);
                    console.log(
                        '服务端返回的车头',
                        this.imageList[index].carHeadPic,
                    );
                    break;
                case 1:
                    this.imageList[index].carEndPic.push(url);
                    console.log(
                        '服务端返回的车尾',
                        this.imageList[index].carEndPic,
                    );
                    break;
                case 2:
                    this.imageList[index].carMainDirverPic.push(url);
                    console.log(
                        '服务端返回的主驾驶',
                        this.imageList[index].carMainDirverPic,
                    );
                    break;
                case 3:
                    this.imageList[index].carDuputyDirvPic.push(url);
                    console.log(
                        '服务端返回的副驾驶',
                        this.imageList[index].carDuputyDirvPic,
                    );
                    break;
                case 4:
                    this.imageList[index].carBackSeatPic.push(url);
                    console.log(
                        '服务端返回的后排',
                        this.imageList[index].carBackSeatPic,
                    );
                    break;
                case 5:
                    this.imageList[index].carotherPic.push(url);
                    console.log(
                        '服务端返回的其他部位',
                        this.imageList[index].carotherPic,
                    );
                    break;
                default:
                    break;
            }
        },
       
        //上传图片
        uploadImage(index) {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.multiple = true;

            input.onchange = async e => {
                const files = e.target.files;
                const remainingSlots = 9 - this.imageList[index].images.length;

                for (
                    let i = 0;
                    i < Math.min(files.length, remainingSlots);
                    i++
                ) {
                    const reader = new FileReader();
                    const file = files[i];

                    reader.onload = async e => {
                        this.imageList[index].images.push(e.target.result);
                        await this.uploadToServer(file, index, 'image'); // 上传到服务端并保存返回的图片地址
                    };

                    reader.readAsDataURL(file);
                }
            };
            input.click();
        },

        deleteImage(index, imgIndex) {
            console.log('索引', index, imgIndex);

            // 删除对应索引的图片
            this.imageList[index].images.splice(imgIndex, 1);

            // 根据索引删除对应部位对象中的图片
            switch (index) {
                case 0:
                    this.imageList[index].carHeadPic.splice(imgIndex, 1);
                    console.log(
                        '删除后的车头图片：',
                        this.imageList[index].carHeadPic,
                    );
                    break;
                case 1:
                    this.imageList[index].carEndPic.splice(imgIndex, 1);
                    break;
                case 2:
                    this.imageList[index].carMainDirverPic.splice(imgIndex, 1);
                    break;
                case 3:
                    this.imageList[index].carDuputyDirvPic.splice(imgIndex, 1);
                    break;
                case 4:
                    this.imageList[index].carBackSeatPic.splice(imgIndex, 1);
                    break;
                case 5:
                    this.imageList[index].carotherPic.splice(imgIndex, 1);
                    break;
                default:
                    break;
            }
        },

        deleteVideo() {
            this.video = '';
            this.carVideo = '';
        },

        chooseVideo() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'video/*';

            input.addEventListener('change', async event => {
                const file = event.target.files[0];
                if (file) {
                    this.video = URL.createObjectURL(file);
                    console.log('选择的视频文件:', this.video);
                    await this.uploadToServer(file, -1, 'video'); // 上传视频到服务端
                }
            });
            input.click();
        },
        //输入备注
        handleInput(event) {
            this.remark = event.target.value;
            this.count = this.remark.length;
            console.log('备注', this.remark);
        },
        // 提交实拍
        async submit() {
            const datae = {
                remark: this.remark,
                carId: parseInt(this.carId),
                carName: this.carName,
                carCode: this.carCode,
                carHeadPic: this.imageList[0].carHeadPic.join(','),
                carEndPic: this.imageList[1].carEndPic.join(','),
                carMainDirverPic: this.imageList[2].carMainDirverPic.join(','),
                carDuputyDirvPic: this.imageList[3].carDuputyDirvPic.join(','),
                carBackSeatPic: this.imageList[4].carBackSeatPic.join(','),
                carotherPic: this.imageList[5].carotherPic.join(','),
                carVideo: this.carVideo,
            };

            console.log('要传递的参数', datae);

            try {
                const response = await submitsp({ data: datae });
                console.log('服务器响应', response);
            } catch (error) {
                console.error('请求出错', error);
            }
        },

        //获取数据回显
        async echo() {
            console.log('触发数据回显')
            const id = parseInt(this.carId);
            try {
                const response = await Echoinfo({ params: { id } });
                console.log('服务器响应回显数据', response);
            } catch (error) {
                console.error('请求出错', error);
            }
        },
    },
};
</script>
  

<style scoped>
.outer {
    margin-top: 50px;
}

.name {
    display: flex;
    align-items: center;
    flex: 1;
    margin-top: 40px;
    margin-left: 30%;
}

.UnifiedName {
    width: 20%;
    font-size: 21px;
    font-family: 'PingFang SC';
}

.UnifiedBox {
    width: 29%;
    border: 4px solid #ccc;
    border-radius: 20px;
    padding: 12px;
    margin-left: 10px;
    font-size: 21px;
    font-family: 'PingFang SC';
    color: rgb(120, 121, 121);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.UnifiedBoxs {
    position: relative;
    width: 60%;
    height: 250px;
    border: 4px solid #ccc;
    border-radius: 20px;
    padding: 20px;
    margin-left: 10px;
    font-size: 32px;
    font-family: 'PingFang SC';
    color: rgb(120, 121, 121);
    display: flex;
    justify-content: center;
}

.count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 25px;
    color: rgb(120, 121, 121);
}

.up {
    height: auto;
    display: flex;
    flex-direction: column;
    margin-left: 40px;
}

.distance {
    position: relative;
    margin-top: 30px;
    margin-left: 30%;
    font-size: 21px;
    font-family: 'PingFang SC';
}
textarea {
    font-size: 22px;
    width: 80%;
    height: 190px;
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    resize: vertical; /* 允许垂直调整大小 */
}

.Heng {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

.imgs {
    position: relative;
    width: 200px;
    height: 200px;
    flex-wrap: wrap;
    margin: 10px;
}

.img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.defaultImageUrl {
    width: 62px;
    height: 54px;
    display: inline-block;
}

.dele {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 200px;
    height: 200px;
    background-color: white;
    border-radius: 20px;
    border: 2px solid rgb(192, 191, 191);
}

.Heng video {
    width: 200px;
    height: 200px;
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12vh;
}

.submit {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: blue;
    color: white;
    width: 280px;
    height: 80px;
    border-radius: 10px;
}

.delete {
    position: absolute;
    width: 38px;
    height: 38px;
    top: 0;
    right: 0;
}

.deleteButton {
    position: absolute;
    width: 38px;
    height: 38px;
    top: 0;
    left: 160px;
}
</style>

  